<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="爆料ID" class="flex-50" prop="factId">
        <el-input v-model="dataInfo.factId" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="爆料标题" class="flex-50" prop="title">
        <el-input type="textarea" v-model="dataInfo.title" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="爆料内容" class="flex-50" prop="description">
        <el-input type="textarea" v-model="dataInfo.description" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="地址" class="flex-50" prop="factAddress">
        <el-input type="textarea" v-model="dataInfo.factAddress" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="爆料类型" class="flex-50" prop="mediaType">
        <el-input v-if="dataInfo.mediaType=='video'" class="cms-width" :disabled="isType('update')"
                  value="视频"></el-input>
        <el-input v-if="dataInfo.mediaType=='audio'" class="cms-width" :disabled="isType('update')"
                  value="音频"></el-input>
        <el-input v-if="dataInfo.mediaType=='picture'" class="cms-width" :disabled="isType('update')"
                  value="图片"></el-input>
      </el-form-item>

      <el-form-item label="图片" class="flex-100" v-if="dataInfo.mediaType=='picture'">
        <img v-for="item in fileList" :src="item | imgOriginalPathFilter" width="60" height="80"
             @click="showImg(item)" style="margin-left: 30px">
      </el-form-item>

      <el-form-item label="视频" class="flex-100" v-if="dataInfo.mediaType=='video'">
        <video v-for="item in fileList" :src="item | filePathFilter" controls="controls"
               style="margin-left: 30px;height: 100px;width: 200px"></video>
      </el-form-item>

      <el-form-item label="音频" class="flex-100" v-if="dataInfo.mediaType=='audio'">
        <audio v-for="item in fileList" :src="item | filePathFilter" controls="controls"
               style="margin-left: 30px"></audio>
      </el-form-item>


      <el-form-item label="审核状态" class="flex-100">
        <el-radio-group v-model="dataInfo.status" @change="resetData">
          <el-radio :label="1">已采用</el-radio>
          <el-radio :label="2">不合用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="奖励金" class="flex-50" prop="rewardAmount" v-if="dataInfo.status==1">
        <el-input v-model="dataInfo.rewardAmount" class="cms-width" type="number" @blur="changeWhyDesc"></el-input>
        HK$
      </el-form-item>

      <el-form-item label="奖励说明" class="flex-50" prop="whyDesc" v-if="dataInfo.status==1">
        <el-input v-model="dataInfo.whyDesc" class="cms-width" type="text"></el-input>
      </el-form-item>

      <el-form-item label="不合用原因" class="flex-50" prop="whyDesc" v-if="dataInfo.status==2">
        <el-input v-model="dataInfo.whyDesc" class="cms-width" type="text"></el-input>
      </el-form-item>

      <el-form-item label="备注" class="flex-50" prop="remark" v-if="dataInfo.status!=0">
        <el-input v-model="dataInfo.remark" class="cms-width" type="text"></el-input>
      </el-form-item>

    </el-form>

    <el-dialog :visible.sync="isShowImg">
      <img width="100%" height="80%" :src="imageUrl">
    </el-dialog>

    <div class="form-footer">
      <el-button type="warning" v-if="isType('save')" @click="add(true)">提交并继续添加</el-button>
      <el-button type="primary" v-if="isType('save')" @click="add(false)">添加</el-button>
      <el-button type="primary" v-if="isType('update') && dataInfo.checkStatus==0" @click="update()"
                 v-perms="'/fact/update'">审核
      </el-button>
      <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
    </div>

  </section>

</template>
<script>
  import axios from "axios/index";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns],
    data() {
      let checkWhyDesc = (rule, value, callback) => {
        if (this.dataInfo.status == 1 && !this.$myUtils.isNull(this.dataInfo.rewardAmount) && this.$myUtils.isNull(value)) {
          callback(new Error('请填写奖励原因'));
        } else {
          callback();
        }
      }
      return {
        rules: {
          whyDesc: [{validator: checkWhyDesc, trigger: 'blur'}]
        },
        dataInfo: {
          status: 0
        },
        fileList: [],
        isShowImg: false,
        imageUrl: ''
      };
    },
    methods: {
      changeWhyDesc() {
        if (this.dataInfo.status == 1 && !this.$myUtils.isNull(this.dataInfo.rewardAmount)) {
          this.dataInfo.whyDesc = '3-5個工作日將會有專人聯系'
        }
      },
      resetData() {
        this.dataInfo.whyDesc = '';
        this.dataInfo.rewardAmount = '';
        this.dataInfo.remark = '';
      },
      getDataInfo(id, type) {
        if (type == 'update') {
          axios.all([
            axios.post(this.$api.factGet, {factId: id})
          ]).then(axios.spread((res) => {
            this.$refs["form"].resetFields();
            console.log('开始查询')
            console.log(res)
            console.log('结束查询')
            this.dataInfo = res.body;
            this.dataInfo.status = Number(this.dataInfo.status);
            this.dataInfo.checkStatus = this.dataInfo.status;
            this.fileList = this.dataInfo.mediaPath.split(',');
          })).catch(error => {
            console.log(error);
          });
        }
        this.loading = false;
      },
      showImg(imageUrl) {
        this.imageUrl = imageUrl;
        this.isShowImg = true;
      },
      add(state) {
        this.saveDataInfo(state, this.$api.factSave, this.dataInfo, "pageList");
      },
      update() {
        console.log(this.dataInfo)
        console.log('111111')
        this.updateDataInfo(this.$api.factUpdate, this.dataInfo, "pageList");
        console.log(this.dataInfo)
      }
    },
    created() {
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
</style>
